<template>
    <div>
<h1>新增</h1>
<table class="table">

    <tbody>
        <tr>
            <td>name</td>
            <td>
                <input type="text" v-model="data.name">
            </td>
        </tr>
        <tr>
            <td>price</td>
            <td>
                <input type="text" v-model="data.price">
            </td>
        </tr>
        <tr>
            <td>isDeposit</td>
            <td>
                <input v-model="data.isDeposit" checked type="radio" name="isDeposit" :value="true"> 需要
                 <input v-model="data.isDeposit"  type="radio" name="isDeposit" :value="false"> 不需要
                 <input v-if="data.isDeposit"  type="text" v-model="data.deposit" > 
                 <input v-else type="text" readonly v-model="data.deposit" > 元
            </td>
        </tr>
        <tr>
            <td>area</td>
            <td>
                <input type="text" v-model="data.area">
            </td>
        </tr>
        <tr>
            <td>count</td>
            <td>
                <input type="text" v-model="data.count">
            </td>
        </tr>
        <tr>
            <td>isNode</td>
            <td>
                <input type="checkbox" v-model="data.isNode" > 打勾为需要预留信息
            </td>
        </tr>
        <tr>
            <td>node</td>
            <td>
                <input type="text" v-model="data.node" >
            </td>
        </tr>
        <tr>
            <td>extraBed</td>
            <td>
                <input v-model="data.extraBed" type="radio" value="1"> 不可加床
                <input v-model="data.extraBed" type="radio" value="2"> 免费加床
                <input v-model="data.extraBed" type="radio" value="3"> 收费加床
                <input type="text" v-model="data.extraBedPrice" > 元
            </td>
        </tr>
        <tr>
            <td>img</td>
            <td>
                <input type="file" name="" id="">
                <img :src="''+data.img" alt="">
            </td>
        </tr>
        <tr>
            <td>state</td>
            <td>
                <input v-model="data.state" type="radio" value="1" checked> 空闲
                <input v-model="data.state" type="radio" value="2"> 已预订
            </td>
        </tr>
        <tr>
            <td>houseTypeId</td>
            <td>
                <select v-model="data.houseTypeId">
                    <option value="0">请选择户型</option>
                    <option value="1">小房间</option>
                    <option value="1">标准间</option>
                    <option value="1">商旅间</option>
                </select>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="button" value="保存" @click="saveinfo">
                <a href="/">返回列表</a>
            </td>
        </tr>
    </tbody>
</table>
    </div>
</template>

<script setup lang="ts">

import axios from 'axios';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const data = ref({
  "id": 0,
  "name": "string",
  "price": 0,
  "isDeposit": true,
  "deposit": 0,
  "area": 0,
  "count": 0,
  "isNode": true,
  "node": "string",
  "extraBed": 0,
  "extraBedPrice": 0,
  "img": "string",
  "state": 0,
  "houseTypeId": 0
})

const saveinfo=()=>{
    axios.post("https://localhost:7174/api/HouseNum/AddHouseNum",data.value).then(res=>{
        if(res.data>0){
            alert("成功")
            router.push({path:'/'})
        }
        else{
            alert("失败。。。。")
        }
    })
}

</script>

<style scoped>

</style>